<template>
	<view>
		<!-- 自定义导航栏 -->
		<news-nav-bar :tabBars="tabBars" :tabIndex="tabIndex" @change-tab="changeTab"></news-nav-bar>
		<!-- 列表 -->

		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{ height: swiperheight + 'px' }" :current="tabIndex" @change="tabChang">
				<!-- 关注111111 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadMore()">
						<block v-for="(items, index) in guanzhu.list" :key="index">
							<common-list :item="items" :index="index"></common-list></block>
						<!-- 上拉加载 -->
						<load-more :loadtext="guanzhu.loadtext"></load-more>
					</scroll-view>
				</swiper-item>

				<!-- 话题222222222 -->
				<swiper-item>
					<scroll-view scroll-y class="list">
						<!-- 搜素框 -->
						<view class="search-input"><input class="uni-input" type="text" placeholder-class="icon iconfont icon-sousuo topic-search" placeholder="搜索内容" /></view>

						<!-- 轮播图 -->
						<swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
							<block v-for="(item, index) in topic.seiper" :key="index">
								<swiper-item><image :src="item.src" mode="widthFix" lazy-load></image></swiper-item>
							</block>
						</swiper>

						<!-- 热门分类 -->
						<topic-nav :nav="topic.nav"></topic-nav>

						<!-- 最近更新 -->
						<view class="topic-new">
							<view>最近更新</view>
							<block v-for="(titleinfo, index) in topic.list" :key="index"><topic-list :titleinfo="titleinfo" :index="index"></topic-list></block>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import newsNavBar from '../../components/news/news-nav-bar.vue'; //自定义导航栏
import commonList from '../../components/common/common-list.vue'; //热门列表
import loadMore from '../../components/common/load-more.vue'; //上拉加载
import topicNav from '../../components/news/topic-nav.vue'; //热门分类
import topicList from '../../components/news/topic-list.vue'; //话题列表
export default {
	components: {
		commonList,
		newsNavBar,
		loadMore,
		topicNav,
		topicList
	},
	data() {
		return {
			swiperheight: 500,
			tabIndex: 0,
			tabBars: [{ name: '关注', id: 'guangzhu' }, { name: '话题', id: 'topic' }],
			guanzhu: {
				loadtext: '上拉加载更多',
				list: [
					// 文字
					{
						userpic: '../../static/demo/userpic/1.jpg',
						username: '鲁迅',
						sex: 0, //0 男  1 女
						age: 25,
						isguanzhu: false,
						title: '什么都是我说的',
						titlepic: false,
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 356
					},
					// 图片
					{
						userpic: '../../static/demo/userpic/2.jpg',
						username: '王娜',
						sex: 1, //0 男  1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/1.jpg',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 356
					},
					// 视频
					{
						userpic: '../../static/demo/userpic/3.jpg',
						username: '李斯',
						sex: 0, //0 男  1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/2.jpg',
						video: {
							looknum: '20w',
							long: '2:47'
						},
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 356
					},
					// 分享
					{
						userpic: '../../static/demo/userpic/4.jpg',
						username: '黄樱',
						sex: 1, //0 男  1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: false,
						video: false,
						share: {
							title: '我是分享标题',
							titlepic: '../../static/demo/datapic/13.jpg'
						},
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 356
					}
				]
			},
			topic: {
				seiper: [{ src: '../../static/demo/banner1.jpg' }, { src: '../../static/demo/banner2.jpg' }, { src: '../../static/demo/banner2.jpg' }],
				nav: [{ name: '最新' }, { name: '游戏' }, { name: '打卡' }, { name: '情感' }, { name: '故事' }, { name: '喜爱' }],
				list: [
					{
						titlepic: '../../static/demo/topicpic/5.jpeg',
						title: '#话题名称#',
						desc: '我是话题描述',
						totalnum: 50,
						todaynum: 10
					},
					{
						titlepic: '../../static/demo/topicpic/5.jpeg',
						title: '#话题名称#',
						desc: '我是话题描述',
						totalnum: 50,
						todaynum: 10
					},
					{
						titlepic: '../../static/demo/topicpic/5.jpeg',
						title: '#话题名称#',
						desc: '我是话题描述',
						totalnum: 50,
						todaynum: 10
					},
					{
						titlepic: '../../static/demo/topicpic/5.jpeg',
						title: '#话题名称#',
						desc: '我是话题描述',
						totalnum: 50,
						todaynum: 10
					}
				]
			}
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				// console.log(res.windowHeight);
				// 计算出窗口高度
				let height = res.windowHeight - uni.upx2px(100);
				this.swiperheight = height;
				// console.log(height)
			}
		});
	},
	methods: {
		// 点击切换
		changeTab(index) {
			console.log(index);
			this.tabIndex = index;
		},
		// 根据视图滑块改变tabbar  滑动切换
		tabChang(e) {
			console.log(JSON.stringify(e.detail));
			console.log(this.tabIndex);
			this.tabIndex = e.detail.current;
		},
		// 上拉加载
		loadMore() {
			// 修改状态
			if (this.guanzhu.loadtext != '上拉加载更多') {
				return;
			}
			// 获取数据
			this.guanzhu.loadtext = '加载中...';
			setTimeout(() => {
				// 获取完成
				let obj = {
					userpic: '../../static/demo/userpic/3.jpg',
					username: '李斯',
					sex: 0, //0 男  1 女
					age: 25,
					isguanzhu: false,
					title: '我是标题',
					titlepic: '../../static/demo/datapic/2.jpg',
					video: {
						looknum: '20w',
						long: '2:47'
					},
					share: false,
					path: '深圳 龙岗',
					sharenum: 20,
					commentnum: 30,
					goodnum: 356
				};

				this.guanzhu.list.push(obj);
				this.guanzhu.loadtext = '上拉加载更多';
			}, 1000);

			// this.guanzhu.loadtext = "没有更多数据了";
		}
	}
};
</script>

<style>
/* 搜索框 */
.search-input {
	padding: 20upx;
}
.search-input > input {
	background-color: #f4f4f4;
	border-radius: 10upx;
}
.topic-search {
	display: flex;
	justify-content: center;
	font-size: 28upx;
}
/* 轮播图 */
.topic-swiper {
	padding: 0 20upx 20upx 20upx;
	border-radius: 10upx;
	overflow: hidden;
	height: 300upx;
}
.topic-swiper swiper-item {
	border-radius: 10upx;
	overflow: hidden;
}
.topic-swiper image {
	width: 100%;
	border-radius: 10upx;
}
/* 热门分类 */

/* 最近更新 */
.topic-new {
	width: 100%;
	padding: 20upx;
}
.topic-new > view:first-child {
	width: 100%;
	padding-bottom: 10upx;
	font-size: 32upx;
}
</style>
